import {
  Action,
  getModule,
  Module,
  Mutation,
  VuexModule,
} from "vuex-module-decorators";
import store from "@/store";
import { ILayoutState } from "@/@types/store";
import themeVariables from "@/assets/styles/themes/index.js";
const layoutModes = ["ltr", "lcr", "ttb"];
import { toggleThemeColorClass, toggleThemeClass } from "@/utils/utils";
import { UserStoreModule } from "@/store/modules/UserStore";
@Module({ dynamic: true, namespaced: true, store, name: "layout" })
export default class LayoutStore extends VuexModule implements ILayoutState {
  public actionItem = {
    showSearch: true,
    showMessage: true,
    showFullScreen: true,
    showRefresh: true,
  };
  public cachedView: any[] = [];
  public device: string = "pc";
  public isCollapse: boolean = false;
  public isFixedNavBar: boolean = true;
  public layoutMode: string = "ltr";
  public permissionRoutes: any[] = [];
  public theme: string = "light";
  public themeColor: string = "theme_color_blue";
  public themeVariables: any = themeVariables;

  public visitedView: any[] = [];

  //#region getter =================================
  public get isShowHeader(): boolean {
    return this.device === "pc" && this.layoutMode === "ttb";
  }
  public get randomLayoutMode() {
    return layoutModes[Math.floor(Math.random() * layoutModes.length)];
  }
  public get getSplitTabs() {
    return this.permissionRoutes.filter((it) => {
      return !it.hidden && it.children && it.children.length > 0;
    });
  }
  public get isEmptyPermissionRoute() {
    return !this.permissionRoutes || this.permissionRoutes.length === 0;
  }
  //#endregion

  //#region test =================================
  //#endregion

  //#region action =================================
  @Action
  public toggleCollapse(collapseStatus: boolean) {
    this.SET_isCollapsed(collapseStatus);
  }
  @Action
  public toggleFixedNavBar(isFixedNavBar: boolean) {
    this.SET_isFixedNavBarState(isFixedNavBar);
  }
  @Action
  public changeLayoutMode(mode = "ltr") {
    this.SET_layoutMode(mode);
    // this.state.layoutMode = mode
  }
  @Action
  public changeDevice(deviceType: string = "pc") {
    this.SET_DeviceType(deviceType);
  }
  @Action
  public initPermissionRoute(routes: any[]) {
    this.SET_permissionRoutes(routes);
  }
  @Action
  public changeTheme(theme = "light") {
    this.SET_Theme(theme);
    // toggleThemeClass(document.body, this.theme)
  }

  @Action
  public toPersonalCenter() {
    //
  }
  @Action
  public logout() {
    //
    this.SET_permissionRoutes([]);
    this.SET_cachedView([]);
    this.SET_visitedView([]);
    UserStoreModule.logout().then();
  }
  //#endregion

  //#region Mutation =================================
  @Mutation
  private SET_permissionRoutes(routes: any[]) {
    this.permissionRoutes.splice(0, this.permissionRoutes.length, ...routes);
  }
  @Mutation
  private SET_Theme(theme: string) {
    this.theme = theme;
    toggleThemeClass(document.body, this.theme);
  }
  @Mutation
  private SET_DeviceType(deviceType: string) {
    this.device = deviceType;
  }
  @Mutation
  private SET_layoutMode(layoutMode: string) {
    this.layoutMode = layoutMode;
  }
  @Mutation
  private SET_isCollapsed(collapseStatus: boolean) {
    this.isCollapse = collapseStatus;
  }
  @Mutation
  private SET_isFixedNavBarState(fixedNavBar: boolean) {
    this.isFixedNavBar = fixedNavBar;
  }
  @Mutation SET_visitedView(visitedView: any[]) {
    this.visitedView = visitedView;
  }
  @Mutation SET_cachedView(cachedView: any[]) {
    this.cachedView = cachedView;
  }
  //#endregion
}
export const LayoutStoreModule = getModule(LayoutStore, store);

//使用代码将css挂在body上
toggleThemeColorClass(document.body, LayoutStoreModule.themeColor);
toggleThemeClass(document.body, LayoutStoreModule.theme);
